<template>
	<view>
		<!-- 全屏加载 -->
		<cover-bulr-bg v-if="coverBulr"></cover-bulr-bg>

		<view class="centem-body" v-else>
			<!-- 顶部图片 -->
			<view class="data-clerk">
				<view class="data-clerk-text">
					<view class="data-clerk-text-h">
						休戚与共
					</view>
					<view class="data-clerk-text-w">
						吾与元规休戚是同，悠悠之谈，宜绝智者之口
					</view>
				</view>
				<view class="data-img">
					<image class="fengrui-img" src="../../static/down/key-img.svg" mode="scaleToFill"></image>
				</view>
			</view>

			<!-- 激励视频下载附件样式 -->
			<block v-if="isShowDown == true">
				<view class="down-view-all">
					<view class="down-user">
						<view class="down-user-img">
							<image class="fengrui-img" src="../../static/my/user.png" mode="aspectFill"></image>
						</view>
						<view class="down-user-name">
							卡密获取
						</view>
					</view>
					<button class="down-btn-video" @tap="videoAD()">
						<view class="down-btn-video-icon">
							<image class="fengrui-img" src="../../static/data/ad_video.svg" mode=""></image>
						</view>
						获取卡密
					</button>
				</view>
			</block>


			<!-- 下载附件内容 -->
			<block v-else>
				<!-- 附件下载方式为复制链接 -->
				<view class="down-view-all">
					<view class="down-user">
						<view class="down-user-img">
							<image class="fengrui-img" src="../../static/my/user.png" mode="aspectFill"></image>
						</view>
						<view class="down-user-name">
							卡密获取
						</view>
					</view>
					<view class="down-network-view">
						<text user-select="true">
							{{ decodedCardCode }}
						</text>
					</view>
					<view class="down-list-btn">
						<button class="down-btn" type="default" v-if="wxSet.fr_copyurl == '1'"
							@tap="tapDownUrl(decodedCardCode)">复制卡密值</button>
					</view>
					<view class="down-list-btn-text" v-if="wxSet.fr_copyurl == '0'">
						<span class="que-user-red">*</span>
						长按链接手动复制
					</view>
				</view>
			</block>

			<!-- 判断微信流量主 -->
			<!-- #ifdef MP-WEIXIN -->
			<block v-if="wxSet.wx_video != ''">
				<view class="" style="margin: 30rpx 30rpx;">
					<ad :unit-id="wxSet.wx_video" ad-type="video" ad-theme="white"></ad>
				</view>
			</block>

			<!-- 其他平台 -->
			<view class="down-view-all">
				<view class="titel-h">
					其他平台
				</view>
				<view class="down-li-toew">
					<button class="down-icon-list-btn" open-type="contact" :send-message-title="posdCenterTitle"
						:send-message-path="posUrl" show-message-card="true">
						<view class="down-icon-list-img">
							<image class="fengrui-img" src="../../static/my/customer.svg" mode="aspectFit">
							</image>
						</view>
						<view class="down-icon-list-img-title">
							客服
						</view>
					</button>

					<button class="down-icon-list-btn" open-type="share">
						<view class="down-icon-list-img">
							<image class="fengrui-img" src="../../static/data/share.svg" mode="aspectFit">
							</image>
						</view>
						<view class="down-icon-list-img-title">分享</view>
					</button>
				</view>
			</view>
			<!-- #endif -->
		</view>

		<!-- 卡密说明 -->
		<view class="down-view-all">
			<view class="titel-h">
				卡密说明
			</view>
			<!-- 正文内容 -->
			<view class="data-view">
				<mp-html :tag-style="tag_style" :content="wxSet.key_step" :css="backendStyle"
					:container-style="container_style" :copy-link="copyLink" selectable="true"> 内容疯狂加载ing...</mp-html>
			</view>
		</view>
	</view>
</template>

<script>
	// 获取应用实例
	const app = getApp()
	import * as API from "../../utils/api";
	import mpHtml from '@/components/mp-html/mp-html';
	let rewardedVideoAd = null;
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				// 页面路径
				posUrl: '',
				// 基本配置
				wxSet: [],
				launchScene: 0, //微信小程序场景值
				// 是否显示内容
				isShowDown: true,
				coverBulr: false,
				decodedCardCode: '',

				// 文本框解析
				tag_style: {
					h1: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
					h2: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
					h3: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
					h4: 'lborder-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
				},
				container_style: 'font-size:15px;overflow-x: hidden;line-height:30px;letter-spacing:1px',
				copyLink: false,
				backendStyle:'.yinfengrui{ color: purple; }'
			}
		},
		// 分享好友配置
		onLoad(posID) {
			// 获取当前时间戳
			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth() + 1; // 月份从 0 开始，需加 1
			const day = now.getDate();
			const postDaySum = year + month + day;
			this.postDaySum = postDaySum;


			// 接受数据
			this.posUrl = 'pages/key/key';

			if (app.globalData.wxSet == '') {
				//（解决异步）
				app.on('wxSet', this.changeToken.bind(this));
			} else {
				this.wxSet = app.globalData.wxSet;
				this.launchScene = app.globalData.launchScene; //微信小程序场景值
				this.starpAd();
			}


			// 微信分享盆友圈
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '获取卡密',
				imageUrl: this.wxSet.share_title_url,
				path: '/pages/key/key'
			}
		},
		// 文章分享盆友圈 目前支持安卓
		onShareTimeline(res) {
			return {
				title: '获取卡密',
				imageUrl: this.wxSet.share_title_url,
				path: '/pages/key/key'
			}

		},

		methods: {
			//（解决异步）
			changeToken() {
				this.wxSet = app.globalData.wxSet;
				this.launchScene = app.globalData.launchScene; //微信小程序场景值
				this.starpAd();
			},

			// 初始化广告
			starpAd() {
				if (this.wxSet.wx_jili_video != '' && this.wxSet.key_ad == '1') {
					this.CreateAd();
				} else {
					this.isShowDown = false;
					this.postKey();
				}
			},
			postKey() {
				uni.request({
					url: API.postKeyApi,
					method: "POST",
					success: (res) => {
						// console.log(res.data)
						if (res.data == '没有可用的卡密    ') {
							uni.showToast({
								title: '没有可用的卡密,请联系管理员',
								icon: "none"
							})
							this.decodedCardCode = "没有可用的卡密,请联系管理员";
						} else {
							this.decodedCardCode = atob(res.data);
						}
						this.isShowDown = false;
					}
				})
			},
			//初始化激励视频广告组件
			CreateAd() {
				if (this.wxSet.wx_jili_video != '') {
					if (wx.createRewardedVideoAd) {
						this.videoAd = wx.createRewardedVideoAd({
							adUnitId: this.wxSet.wx_jili_video
						})
						this.videoAd.onLoad(() => {})
						this.videoAd.onError((err) => {
							// console.log(err)
							// 播放错误下发奖励
							this.postKey();
						})
						this.videoAd.onClose((res) => {
							if (res && res.isEnded) {
								uni.showToast({
									icon: 'none',
									title: "感谢您的支持"
								})
								this.postKey();
							} else {
								uni.showToast({
									icon: 'none',
									title: "中途关闭广告"
								})
							}
						})
					}

				}
			},

			// 流量主视频弹窗
			videoAD() {
				if (this.launchScene == 1154) {
					uni.showToast({
						title: '请前往小程序使用完整服务',
						icon: "none"
					})
					return;
				}
				this.getVideoAd();
			},

			// 激励视频
			getVideoAd() {
				// 用户触发广告后，显示激励视频广告
				if (this.videoAd) {
					this.videoAd.show().catch(() => {
						// 失败重试
						this.videoAd.load()
							.then(() => this.videoAd.show())
							.catch(err => {
								console.log('激励视频', err)
								// this.isShowDown = false;
							})
					})
				}
			},

			// 左上角返回按钮
			tarBlack: function() {
				// 建立页面栈 如果是1则是分享打开需要返回主页，大于1则返回上一级
				var selPage = getCurrentPages();
				// console.log(selPage.length)
				if (selPage.length == 1) {
					uni.switchTab({
						url: "../index/index"
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},


			// 复制Url
			tapDownUrl(e) {
				uni.setClipboardData({
					data: e,
				})
			}
		}
	}
</script>

<style>
	.data-view {
		margin: 20rpx 20rpx;
		font-size: 34rpx;
		color: #333232;
		line-height: 60rpx;
		word-wrap: break-word;
	}

	/* 关注微信公众号 */
	.que-user-red {
		color: red;
	}

	.account-aout {
		margin-left: 30rpx;
	}

	.account-btn {
		height: 60rpx;
		background-color: #1c262a;
		border-radius: 200rpx;
		font-size: 24rpx;
		width: 150rpx;
		color: #FFFFFF;
		flex-shrink: 0;
		margin-right: 0rpx;
	}

	.account-describe {
		font-size: 20rpx;
		color: #7c7c7c;
	}

	.account-img {
		height: 80rpx;
		width: 80rpx;
		border-radius: 200rpx;
		overflow: hidden;
	}

	.account-flex {
		display: flex;
	}

	.account-view {
		background-color: #f9f9f9;
		border-radius: 20rpx;
		height: 120rpx;
		margin: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18rpx 30rpx;
	}

	/* 密码访问 */
	.password-title {
		margin: 20rpx 0;
		font-weight: bold;
		font-size: 36rpx;
		text-align: center;
	}

	.password-desrc {
		width: 70%;
		margin: auto;
		text-align: center;
		font-size: 28rpx;
		color: #929292;
	}

	.password-position {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -60%);
	}

	.password-icon {
		height: 500rpx;
		width: 100%;
		overflow: hidden;
	}

	/* 加载动画 */
	.data-login {
		height: 70rpx;
		width: 70rpx;
		margin: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.data-login-flex {
		position: fixed;
		top: 0%;
		left: 0%;
		height: 100%;
		width: 100%;
		z-index: 1030;
		background-color: #f7f7f7;
	}

	.down-view-ruan {
		color: #23c1aa;
		margin-right: 14rpx;
		flex-shrink: 0;
	}

	.down-view-title {
		display: flex;
	}

	.down-view-title-dscr {
		padding: 14rpx 36rpx 30rpx 46rpx;
		color: #B2B2B2;
		font-size: 24rpx;
	}

	.down-icon-list-btn {
		text-align: center;
		margin: 0;
		background-color: unset;
		padding: 0;
	}

	.down-li-toew {
		display: flex;
		margin-top: 60rpx;
		align-items: center;
		border-radius: 20rpx;
		justify-content: space-around;
	}

	.down-icon-list {
		text-align: center;
	}

	.down-icon-list-img {
		height: 60rpx;
		width: 60rpx;
		overflow: hidden;
		margin: auto;
	}

	.down-icon-list-img-title {
		font-size: 22rpx;
		color: #b1b1b1;
		margin-top: 12rpx;
	}

	.down-li-toew-ma {
		margin: 40rpx 0rpx 20rpx 0rpx;
	}

	/* 说明 */
	.que-user-red {
		color: red;
	}

	.list-btn {
		height: 50rpx;
		width: 160rpx;
		background-color: #007AFF;
		border-radius: 100rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 50rpx;
		bottom: 0rpx;
		position: absolute;
		right: 0;
	}

	/* 列表 */
	.list-li-left-describe {
		color: #D5D5D5;
		font-size: 26rpx;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
	}

	.list-li-tag {
		color: #0BBDA6;
		font-size: 20rpx;
	}

	.list-li-left-h {
		font-size: 36rpx;
	}

	.list-li-left {
		margin-left: 32rpx;
		flex-grow: 1;
		height: 120rpx;
		position: relative;
	}

	.list-img {
		height: 120rpx;
		width: 140rpx;
		border-radius: 14rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.list-li {
		display: flex;
		margin-top: 60rpx;
		align-items: center;
		background-color: #fff;
		/* padding: 24rpx; */
		border-radius: 20rpx;
	}

	/* 百度网盘下载 */
	.down-btn {
		background-color: #007AFF !important;
		color: #FFFFFF !important;
		border-radius: 100rpx !important;
		width: 100%;
		margin: 0rpx 10rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
	}

	.down-btn-video {
		background-color: #007AFF !important;
		color: #FFFFFF !important;
		border-radius: 100rpx !important;
		width: 80%;
		margin: auto;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	.down-btn-video-icon {
		height: 46rpx;
		width: 56rpx;
		margin-top: -6rpx;
		margin-right: 8rpx;
	}

	.down-btn-key {
		background-color: #23c1aa !important;
		color: #FFFFFF !important;
		border-radius: 100rpx !important;
		width: 100%;
		margin: 0rpx 10rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
	}

	.down-list-btn-text {
		font-size: 22rpx;
		color: #B2B2B2;
	}

	.down-list-btn {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		margin-top: 22rpx;
		overflow: hidden;
	}

	.down-network-icon {
		width: 150rpx;
		background-color: #EFEFEF;
		border-radius: 10rpx;
		height: 130rpx;
		margin-left: 20rpx;
		overflow: hidden;
		flex-shrink: 0;
		line-height: 130rpx;
		margin: auto;
	}

	.down-network-view {
		padding: 30rpx 0rpx;
		background-color: #EFEFEF;
		border-radius: 10rpx;
		padding: 30rpx;
		color: #B2B2B2;
		font-size: 24rpx;
		word-break: break-all;
	}

	.down-user-name {
		margin-left: 20rpx;
		font-size: 32rpx;
	}

	.down-user-img {
		height: 60rpx;
		width: 60rpx;
		overflow: hidden;
		border-radius: 200rpx;
	}

	.down-user {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		justify-content: flex-start;
		overflow: hidden;
	}

	.down-file {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 70rpx 0;
	}

	.down_file_icon {
		height: 44rpx;
		width: 44rpx;
		opacity: 0.5;
		overflow: hidden;
	}

	.down_file_icon_index {
		height: 80rpx;
		width: 80rpx;
		opacity: 1;
		overflow: hidden;
	}

	.down-file-txt {
		margin: 14rpx 0;
		font-size: 28rpx;
		color: #B2B2B2;
	}

	.self-user-updata {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 76rpx;
	}

	/* 顶部图片 */
	.data-clerk-text-w {
		font-size: 24rpx;
		color: #b1b1b1;
	}

	.data-clerk-text-h {
		font-size: 40rpx;
		margin-bottom: 20rpx;
	}

	.data-clerk-text {
		width: 360rpx;
		position: absolute;
		top: 80rpx;
		left: 40rpx;
	}

	.data-clerk {
		width: 100%;
		height: 300rpx;
		position: relative;
	}

	.data-img {
		height: 300rpx;
		width: 360rpx;
		overflow: hidden;
		position: absolute;
		bottom: 0rpx;
		right: 0rpx;
	}

	/* 全局 */
	.titel-h {
		font-size: 34rpx;
		position: relative;
		margin-bottom: 10rpx;
	}

	/* .titel-h:after {
		content: '';
		position: absolute;
		bottom: -14rpx;
		left: 0px;
		width: 96rpx;
		height: 8rpx;
		border-radius: 200rpx;
		background: linear-gradient(90deg, rgba(55, 110, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);
	} */

	.down-view-all {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 38rpx;
		margin: 38rpx;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	page {
		background-color: #F7F7F7;
	}

	.centem-body {
		/* background-image: linear-gradient(#3482e2, #F7F7F7); */
	}

	button:after {
		border: 0px solid rgba(0, 0, 0, .2);

	}

	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {

		page,
		.data-login-flex {
			background: #161616;
		}

		.down-view-all,
		.account-view,
		.list-li {
			background-color: #202020;
		}

		.down-network-view,
		.account-btn,
		.down-network-icon {
			background-color: #797979;
		}
	}
</style>